// src/components/MainBanner.jsx
import React from 'react';

const MainBanner = () => {
  return (
    <div className="hero border-1 pb-3"> {/* (1) 这个外层 div 的样式 */}
      <div className="card bg-dark text-white border-0 mx-0 mx-md-3" style={{ height: '200px', position: 'relative' }}> {/* (2) 这是图片和文字覆盖层的直接父容器 */}
        <img
          className="card-img img-fluid" // (3) Bootstrap 类名
          src="/assets/main-banner.jpg"
          alt="时尚潮流新品"
          style={{ maxHeight: '500px', objectFit: 'cover' }} // (4) 内联样式
        />
        <div className="card-img-overlay d-flex align-items-center"> {/* (5) 图片覆盖层 */}
          <div className="container">
            <h5 className="card-title fs-1 text fw-lighter">新款上市</h5>
            <p className="card-text fs-5 d-none d-sm-block">
              探索本季最新潮流，发现你的专属风格。
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainBanner;